<template>
	<view class="container">
		<c-navBar title="点工任务创建" isPerch></c-navBar>

		<view class="content">
			<view class="item flex" @click="selectPrject">
				<view class="title required">所属项目</view>
				<u-input v-model="project.projectName" disabled inputAlign="right" border="none"
					placeholderClass="placeholder" placeholder="请选择所属项目">
					<template #suffix>
						<image style="width: 24rpx; height: 24rpx" src="/static/home/right2.png" mode="scaleToFill" />
					</template>
				</u-input>
			</view>

			<!-- 任务 -->
			<view class="tast" v-for="(item, index) in form.stask" :key="index">
				<view class="task-box">
					<view class="tast-title">点工任务{{ index + 1 }}</view>
					<view class="delete" @click="deleteTask(index)">删除</view>
				</view>
				<view class="item1 flex">
					<view class="title required">任务名称</view>
					<u-input v-model="form.stask[index].taskName" inputAlign="right" border="none"
						placeholderClass="placeholder" placeholder="请输入任务名称">
					</u-input>
				</view>

				<view class="item1 flex">
					<view class="title required">任务地点</view>
					<u-input v-model="form.stask[index].taskAddress" inputAlign="right" border="none"
						placeholderClass="placeholder" placeholder="请输入任务地点">
					</u-input>
				</view>


				<view class="item1 flex" @click="selectStartTime('name7', index)">
					<view class="title required">预计开始时间</view>
					<u-input v-model="form.stask[index].name7" inputAlign="right" border="none"
						placeholderClass="placeholder" disabled placeholder="请选择预计开始时间">
						<template #suffix>
							<image style="width: 24rpx; height: 24rpx" src="/static/home/right2.png"
								mode="scaleToFill" />
						</template>
					</u-input>
				</view>

				<view class="item1 flex" @click="selectEndTime('name8', index)">
					<view class="title required">结束开始时间</view>
					<u-input v-model="form.stask[index].name8" disabled inputAlign="right" border="none"
						placeholderClass="placeholder" placeholder="请选择预计结束时间">
						<template #suffix>
							<image style="width: 24rpx; height: 24rpx" src="/static/home/right2.png"
								mode="scaleToFill" />
						</template>
					</u-input>
				</view>

				<view class="item1 flex">
					<view class="title">班组名称</view>
					<u-input v-model="form.stask[index].taskGroup" inputAlign="right" border="none"
						placeholderClass="placeholder" placeholder="请输入班组名称">
					</u-input>
				</view>

				<view class="item1 flex">
					<view class="title">班组组长</view>
					<u-input v-model="form.stask[index].groupLeader" inputAlign="right" border="none"
						placeholderClass="placeholder" placeholder="请输入班组组长">
					</u-input>
				</view>

				<view class="item1" style="border: none;">
					<view class="title required">工作内容</view>
					<textarea v-model="form.stask[index].startMessage" style="margin-top: 24rpx;" class="textarea"
						placeholderClass="placeholder" placeholder="请输入工作内容"></textarea>
				</view>

				<view class="line"></view>

				<!-- 添加人员 -->
				<view class="persons">
					<view class="person-title">
						<view class="title">需求人员</view>
						<view class="person-btn">
							<view class="add1" @click="add1Person(index)">新增</view>
							<view class="add2" @click="add2Person(index)">添加</view>
						</view>
					</view>
					<view class="item2" v-for="(item1, index1) in item.workerPer" :key="index1">
						<view class="text1 text name">{{ item1.workerName }}</view>
						<view class="text2 text">{{ item1.workerPhone }}</view>
						<view class="text3 text" :style="{ 'color': item1.workType == '普工' ? '#00693A' : '#4280DD' }">{{ item1.workType
                            }}
						</view>
						<view class="text delete" @click="deletePerson(index, index1)">删除</view>
					</view>
				</view>
			</view>




			<view v-if="!id" class="addTask" @click="addTask">+ 添加任务</view>


			<view class="btn-box">
				<view class="btn" @click="establish">{{id?'重新上传':'确认创建'}}</view>
			</view>
		</view>

		<!-- 项目弹窗 -->
		<!-- <c-project :projectShow.sync="projectShow" :value.sync="project"></c-project> -->
		<c-check title="添加项目" :show="projectShow" @determine="confirmPro" field="projectName" :dataList="projectList"
			@close="projectShow = false"></c-check>

		<!-- 时间选择器 -->
		<u-datetime-picker :show="timeShow" v-model="value1" @cancel="timeShow = false" mode="datetime"
			@confirm="confirmTime"></u-datetime-picker>
		<!-- 人员选择器 -->
		<!-- <c-person :show.sync="personShow" :value.sync="value"></c-person> -->
		<c-check-person title="添加人员" v-if="personShow" :show="personShow" :dataList="workerList" field="popName"
			@determine="confirmPerson" @close="personShow=false" :more='true'></c-check-person>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				projectList: [],
				workerList: [],
				project: null,
				form: {
					projectId: '',
					stask: [{
						taskName: '',
						taskAddress: '',
						taskGroup: '',
						startMessage: '',
						groupLeader: '',
						name7: '',
						name8: '',
						useStatus: '1',
						startStatus: '3',
						workerId: '',
						workerPer: []
					}],
				},
				projectShow: false,
				timeShow: false,
				value1: Number(new Date()),
				type: {
					filed: 'groupLeader',
					index: 0
				},
				personShow: false,
				value: {},
				index: 0, // 点击添加员工的index
				id: ''
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id
				this.getWorkerTaskDetail()
			}
		},
		methods: {
			// 点工任务上报详情
			getWorkerTaskDetail() {
				uni.showLoading({
					title: '加载中'
				});
				this.$api.workerTaskDetail({
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						console.log('点工任务上报详情', res)
						this.project = res.data.project
						this.form.stask[0] = res.data
						this.form.stask[0].useStatus = '1'
						this.form.stask[0].startStatus = '3'
						this.form.stask[0].name7 = res.data.expectedTime.split('-')[0]
						this.form.stask[0].name8 = res.data.expectedTime.split('-')[1]
						this.form.stask[0].workerPer = res.data.workerList
					}
					uni.hideLoading();
				}).finally(() => {
					uni.hideLoading();
				})
			},

			findNthIndex(str, char, n) {
				let count = 0;
				for (let i = 0; i < str.length; i++) {
					if (str[i] === char) {
						count++;
						if (count === n) {
							return i;
						}
					}
				}
				return -1; // 如果没有找到第 n 个字符，返回 -1
			},

			// 选择项目
			confirmPro(v) {
				this.project = v
				this.form.projectId = v.id
				this.projectShow = false
			},

			// 点击选择所属项目
			selectPrject() {
				this.$api.projectList({}).then(res => {
					if (res.code == 200) {
						console.log(res, '项目');
						this.projectList = res.data;
						this.projectShow = true
					}
				})
			},

			establish() {
				if (!this.project?.id) {
					return uni.showToast({
						title: '请选择项目',
						icon: 'none'
					})
				}
				let pass = true
				this.form.stask.some((item, index) => {
					item.projectId = this.project?.id;
					if (!item.taskName) {
						pass = false
						uni.showToast({
							title: `请输入任务${index+1} 任务名称`,
							icon: 'none'
						})
						return true;
					}
					if (!item.taskAddress) {
						pass = false
						uni.showToast({
							title: `请输入任务${index+1} 任务地点`,
							icon: 'none'
						})
						return true;
					}
					// if (!item.taskGroup) {
					// 	pass = false
					// 	uni.showToast({
					// 		title: `请输入任务${index+1} 班组名称`,
					// 		icon: 'none'
					// 	})
					// 	return true;
					// }
					// if (!item.groupLeader) {
					// 	pass = false
					// 	uni.showToast({
					// 		title: `请输入任务${index+1} 班组组长`,
					// 		icon: 'none'
					// 	})
					// 	return true;
					// }
					if (!item.startMessage) {
						pass = false
						uni.showToast({
							title: `请输入任务${index+1} 工作内容`,
							icon: 'none'
						})
						return true;
					}
					if (!item.name7) {
						pass = false
						uni.showToast({
							title: `请选择任务${index+1} 预计开始时间`,
							icon: 'none'
						})
						return true;
					}
					if (!item.name8) {
						pass = false
						uni.showToast({
							title: `请选择任务${index+1} 预计结束时间`,
							icon: 'none'
						})
						return true;
					}
					if (item.workerPer.length == 0) {
						pass = false
						uni.showToast({
							title: `请添加任务${index+1} 需求人员`,
							icon: 'none'
						})
						return true;
					}

					item.expectedTime = item.name7 + '-' + item.name8;
					item.workerId = item.workerPer.map(v => v.id).join(',')
				})

				if (!pass) return

				this.form.stask.forEach((item, index) => {
					this.$api.workerTaskUpdate(item).then(res => {
						if (index == this.form.stask.length - 1 && res.code == 200) {
							uni.showToast({
								icon: 'none',
								title: '操作成功'
							})

							if (this.id) {
								uni.reLaunch({
									url: '/pages/home/taskList'
								})
							} else {
								uni.navigateBack()
							}


						}

					})
				})
			},
			// 添加任务
			addTask() {
				this.form.stask.push({
					taskName: '',
					taskAddress: '',
					taskGroup: '',
					startMessage: '',
					groupLeader: '',
					name7: '',
					name8: '',
					useStatus: '1',
					startStatus: '3',
					workerId: [],
					workerPer: []
				})
			},
			// 添加人员
			add2Person(index) {
				this.index = index
				if (!this.project) {
					return uni.showToast({
						title: '请选择项目',
						icon: 'none'
					})
				} else {
					this.$api.workerList({
						projectId: this.project.id
					}).then(res => {
						if (res.code == 200) {
							this.workerList = res.data.map(item => {
								item.popName = item.workerName + ' ' + item.workerPhone + ' ' + item
									.workType
								return item
							})
							console.log(this.workerList, '员工列表')
							this.personShow = true
						}
					})
				}
			},

			// 确定添加人员
			confirmPerson(v) {
				this.personShow = false
				console.log(v, '选择的人员');
				this.form.stask[this.index].workerPer = [...new Map([...this.form.stask[this.index].workerPer, ...v].map(
					item => [item.id, item])).values()];
			},

			// 新增人员
			add1Person(index) {
				this.form.projectId = this.project?.id;
				if (!this.form.projectId) {
					return uni.showToast({
						title: '请选择项目',
						icon: 'none'
					})
				} else {
					uni.navigateTo({
						url: '/pages/home/addPerson?projectId=' + this.project.id,
					})
				}
			},
			// 删除员工
			deletePerson(index, index1) {
				console.log(index, index1);
				console.log(this.form.stask[index].workerPer, 'this.form.stask[index].workerPer');
				this.form.stask[index].workerPer.splice(index1, 1)
				this.$forceUpdate(); // 手动触发更新

			},
			// 删除任务
			deleteTask(index) {
				this.form.stask.splice(index, 1)
			},
			// 选择开始时间
			selectStartTime(type, index) {
				this.timeShow = true
				this.type.filed = type
				this.type.index = index
			},
			// 选择结束时间
			selectEndTime(type, index) {
				this.type.filed = type
				this.type.index = index
				if (!this.form.stask[index].name7.toString()) {
					return uni.showToast({
						title: '开始时间不能为空',
						icon: 'none'
					})
				}
				this.timeShow = true
			},
			confirmTime({
				value
			}) {
				if (this.type.filed == 'name8' && !!this.form.stask[this.type.index].name7) {
					if (value <= new Date(this.form.stask[this.type.index].name7).getTime()) {
						return uni.showToast({
							title: '结束时间不能小于开始时间',
							icon: 'none'
						})
					}
				} else if (this.type.filed == 'name7' && !!this.form.stask[this.type.index].name8) {
					if (new Date(this.form.stask[this.type.index].name7).getTime() <= value) {
						return uni.showToast({
							title: '结束时间不能小于开始时间',
							icon: 'none'
						})
					}
				}
				this.form.stask[this.type.index][this.type.filed] = this.$fn.formatTime(value, 'yyyy.MM.dd HH:mm')
				this.timeShow = false
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {

		.required {
			&::before {
				content: '*';
				color: red;
			}
		}

		.content {
			padding-bottom: 200rpx;

			.item {
				padding: 0 32rpx 20rpx 32rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					font-weight: 500;
					font-size: 32rpx;
					color: #1A1A1A;
				}

				/deep/ .placeholder {
					font-weight: 400;
					font-size: 28rpx;
					color: #999 !important;
				}

				/deep/ .u-input__content {
					background: #fff;
				}
			}


			.tast {
				.task-box {
					padding: 0 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					background: #F7F7F7;
					height: 96rpx;
					line-height: 96rpx;


					.tast-title {
						font-weight: bold;
						font-size: 32rpx;
						color: #00693A;
					}

					.delete {
						font-weight: 500;
						font-size: 32rpx;
						color: #E52600;
					}

				}


				.flex {
					display: flex;
					align-items: center;
					justify-content: space-between;
				}

				.item1 {
					margin-top: 20rpx;
					padding: 0 32rpx 20rpx 32rpx;
					width: 100%;
					border-bottom: 1rpx solid #E6E6E6;

					.title {
						width: 210rpx;
						font-weight: 500;
						font-size: 32rpx;
						color: #1A1A1A;
					}

					.textarea {
						width: 94%;
						height: 200rpx;
						background: #FAFAFA;
						border-radius: 12rpx 12rpx 12rpx 12rpx;

						margin-bottom: 32rpx;
						padding: 24rpx;
					}

					/deep/ .placeholder {
						font-weight: 400;
						font-size: 28rpx;
						color: #999 !important;
					}

					/deep/ .u-input__content {
						background: #fff;
					}
				}
			}

			.line {
				margin: 0rpx 0 30rpx 0;
				height: 10rpx;
				background: #F7F7F7;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
			}

			.persons {
				padding: 0 32rpx 20rpx 32rpx;

				.person-title {
					padding-bottom: 30rpx;
					border-bottom: 1rpx solid #E6E6E6;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.title {
						width: 210rpx;
						font-weight: 500;
						font-size: 32rpx;
						color: #1A1A1A;
					}

					.person-btn {
						display: flex;

						.add1,
						.add2 {
							width: 96rpx;
							height: 44rpx;
							background: #00693A;
							border-radius: 4rpx 4rpx 4rpx 4rpx;

							font-weight: 500;
							font-size: 20rpx;
							color: #FFFFFF;
							line-height: 44rpx;
							text-align: center
						}

						.add2 {
							margin-left: 16rpx;
						}
					}
				}

				.item2 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 30rpx 0;
					border-bottom: 1rpx solid #E6E6E6;
					gap: 5rpx;

					.text {
						font-weight: 500;
						font-size: 28rpx;
						color: #1A1A1A;
					}

					.text1 {
						flex: 2
					}

					.text2 {
						flex: 2
					}

					.text3 {
						flex: 1
					}

					.name {
						@include ellipsis(1);
						width: 150rpx;
					}

					.delete {
						color: #E52600;
					}

				}
			}


			.addTask {
				margin: 0 auto;
				width: 686rpx;
				height: 80rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				border: 1rpx solid #00693A;


				font-weight: 500;
				font-size: 28rpx;
				color: #00693A;
				line-height: 80rpx;
				text-align: center;
			}
		}
	}
</style>